<template>
  <view class="page-container">
    <!-- 顶部搜索栏 -->
    <uv3-navbar title="核销记录">
      <template #left>
        <view class="search-bar">
          <uv-input 
            v-model="state.searchKey" 
            placeholder="请输入搜索关键词" 
            clearable
            @confirm="handleSearch"
          />
          <uv-button 
            type="primary" 
            size="small" 
            @click="handleSearch"
          >搜索</uv-button>
        </view>
      </template>
    </uv3-navbar>

    <!-- 内容区域 -->
    <scroll-view 
      class="scroll-container"
      scroll-y
      refresher-enabled
      :refresher-triggered="state.isRefreshing"
      @refresherrefresh="onPullDownRefresh"
      @scrolltolower="onReachBottom"
    >
      <!-- 核销记录卡片 -->
      <view 
        v-for="(item, index) in state.recordList" 
        :key="index"
        class="record-card"
      >
        <view class="card-header">
          <text class="project-name">{{ item.projectName }}</text>
          <text class="status-tag">{{ item.statusText }}</text>
        </view>
        <view class="card-row">
          <text class="label">用户：</text>
          <text class="value">{{ item.userName }}</text>
        </view>
        <view class="card-row">
          <text class="label">实付金额：</text>
          <text class="amount">¥{{ item.amount }}</text>
        </view>
        <view class="card-row">
          <text class="label">核销时间：</text>
          <text class="time">{{ item.consumeTime }}</text>
        </view>
      </view>

      <!-- 加载提示 -->
      <view class="loading-tip">
        <text v-if="state.loading">加载中...</text>
        <text v-else-if="state.noMore">没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

// 伪造数据
const mockData = (page, pageSize) => {
  return Array.from({ length: pageSize }, (_, i) => ({
    projectName: ['普通洗车', '机油保养', '美容打蜡', '内饰清洁'][i % 4],
    userName: `用户${page}${String.fromCharCode(97 + i)}`,
    amount: (Math.random() * 500 + 50).toFixed(2),
    consumeTime: `2025-03-${String(page).padStart(2, '0')} ${10 + i}:30:00`,
    statusText: ['已完成', '已核销', '待服务'][i % 3]
  }))
}

// 状态管理
const state = reactive({
  recordList: [],
  searchKey: '',
  currentPage: 1,
  pageSize: 10,
  loading: false,
  noMore: false,
  isRefreshing: false
})

// 加载数据
const loadData = async (isRefresh = false) => {
  if (state.loading) return
  state.loading = true
  
  // 模拟接口请求
  setTimeout(() => {
    const newData = mockData(state.currentPage, state.pageSize)
    
    if (isRefresh) {
      state.recordList = newData
    } else {
      state.recordList.push(...newData)
    }
    
    state.noMore = newData.length < state.pageSize
    state.loading = false
    state.isRefreshing = false
  }, 1000)
}

// 搜索处理
const handleSearch = () => {
  state.currentPage = 1
  state.recordList = []
  loadData(true)
}

// 下拉刷新
onPullDownRefresh(() => {
  state.isRefreshing = true
  state.currentPage = 1
  loadData(true)
})

// 上拉加载
onReachBottom(() => {
  if (!state.noMore) {
    state.currentPage++
    loadData()
  }
})

// 初始化加载
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .search-bar {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    width: 100%;
    
    ::v-deep .uv-input {
      flex: 1;
      margin-right: 20rpx;
    }
  }
  
  .scroll-container {
    flex: 1;
    padding: 20rpx;
  }
  
  .record-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .project-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }
      
      .status-tag {
        font-size: 24rpx;
        padding: 6rpx 16rpx;
        background: #e8f4ff;
        color: #1890ff;
        border-radius: 8rpx;
      }
    }
    
    .card-row {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      font-size: 28rpx;
      
      .label {
        color: #666;
        min-width: 140rpx;
      }
      
      .value {
        color: #333;
      }
      
      .amount {
        color: #ff4d4f;
        font-weight: 500;
      }
      
      .time {
        color: #999;
      }
    }
  }
  
  .loading-tip {
    text-align: center;
    padding: 30rpx;
    color: #999;
    font-size: 28rpx;
  }
}
</style>
